<template>
	<header class="g-header">
		<div class="inline-flex-center ml-16">
			<span
				@click="onCollapseHandle"
				class="icon-collapse"
				:class="{
					'el-icon-s-unfold': layout.isCollapse,
					'el-icon-s-fold': !layout.isCollapse,
				}"
			></span>
			<el-divider class="ml-14 mr-14" direction="vertical"></el-divider>
			<breadcrumb></breadcrumb>
		</div>

		<el-dropdown placement="bottom" @command="onClickDropMenu">
			<div class="avatar-box">
				<el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng1.png">张</el-avatar>
				<span class="avatar-nickname">这是昵称这是昵称这是昵称</span>
			</div>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="profile">个人中心</el-dropdown-item>
				<el-dropdown-item command="exit">退出登陆</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</header>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb';
export default {
	components: {
		Breadcrumb,
	},
	data() {
		return {};
	},
	inject: ['layout'],
	methods: {
		onCollapseHandle() {
			this.layout.isCollapse = !this.layout.isCollapse;
		},
		//点击下拉菜单时触发
		onClickDropMenu(command) {
			if (command === 'profile') {
				//跳转个人中心
			} else if (command === 'exit') {
				// 退出登陆
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.g-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.icon-collapse {
	font-size: 24px;
	color: #666;
}
.el-dropdown {
	height: 100%;
}
.avatar-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	height: 100%;
	transition: 0.1s;
	.el-avatar {
		font-size: 16px;
	}

	&:hover {
		.avatar-nickname {
			color: #fff;
		}
		background-color: #fc665a;
	}
}
.avatar-nickname {
	max-width: 140px;
	font-size: 16px;
	word-spacing: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #666;
}
.avatar-nickname {
	margin-left: 10px;
}
</style>
